@import '@/assets/css/public';
.ZGIntervalGraph2{
	color:#fff;
	.wrapper{
	  .ctn{
			border: 1px solid #e3e5e4;
			box-sizing: border-box;
			height: 920px;
			padding: 10px;
			box-sizing: border-box;
			display: flex;
			& > div + div{
				border-left: 1px solid #e3e5e4;
			}
			.oneBox{
				border: 1px solid #e3e5e4;
				border-right: 0;
				flex:5.5;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.top{
					height: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.btm{
					flex:1;
					overflow: hidden;
					display: flex;
					.left{
						flex:1;
						overflow: hidden;
						padding: 10px 5px;
						display: flex;
						flex-direction: column;
						border-right: 1px solid #e3e5e4;
						box-sizing: border-box;
						& > p{
							text-align: center;
							padding: 20px;
							box-sizing: border-box;
						}
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							& > li{
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 3px 0;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									margin-left: 5px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									overflow: hidden;
								}
							}
						}
					}
					.right{
						flex:1;
						overflow: hidden;
						padding: 10px 5px;
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						& > p{
							text-align: center;
							padding: 20px;
							box-sizing: border-box;
						}
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							& > li{
								display: flex;
								align-items: center;
								border: 1px solid #e3e5e4;
								padding: 3px 0;
								box-sizing: border-box;
								.svgBox{
									width: 60px;
									height: 25px;
									margin-left: 5px;
									display: flex;
									align-items: center;
									justify-content: center;
									& > svg{
										width: 100%;
										height: 100%;
									}
								}
								& > p{
									flex:1;
									overflow: hidden;
								}
							}
						}
					}
				}
			}
			.twoBox{
				flex:3;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				border: 1px solid #e3e5e4;
				border-right: 0;
				.twoBox-top{
					flex:0.8;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						font-size: 16px;
						height: 60px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-bottom: 1px solid #e3e5e4;
					}
					.twoBox-topCtn{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						& > div + div{
							border-top: 1px solid #e3e5e4;
						}
						.topCtn{
							flex:3;
							overflow:hidden;
							display: flex;
							justify-content: center;
							align-items: center;
							.topCtnLeft{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > p{
									margin-bottom: 15px;
								}
								.inner{
									width: 150px;
									height: 100px;
									border: 2px solid #ff7260;
									display: flex;
									align-items: center;
									.innerLeft{
										border: 1px solid #ff7260;
										flex:2;
										overflow: hidden;
										height: 50px;
										margin-left: 10px;
										position: relative;
										& > span{
											display: block;
											font-size: 28px;
											color: #ff7260;
											transform: rotate(45deg);
											position: absolute;
											top:5px;
											left: 10px;
										}
									}
									.innerRight{
										height: 100%;
										flex:2.5;
										overflow: hidden;
										display: flex;
										flex-direction: column;
										& > p{
											font-size: 14px;
											text-align: right;
											margin: 10px 5px 0 0;
										}
										.AB{
											flex:1;
											overflow: hidden;
											display: flex;
											justify-content: flex-end;
											align-items: flex-end;
											margin: 0 5px 10px 0;
											.A{
												display: flex;
												flex-direction: column;
												align-items: center;
												margin-right: 5px;
												& > p{
													font-size: 14px;
													margin-bottom: 10px;
												}
												.imgBox{
													width: 30px;
													height: 30px;
													& > img{
														width: 100%;
														height: 100%;
													}
												}
											}
											.B{
												display: flex;
												flex-direction: column;
												align-items: center;
												& > p{
													font-size: 14px;
													margin-bottom: 10px;
												}
												.imgBox{
													width: 30px;
													height: 30px;
													& > img{
														width: 100%;
														height: 100%;
													}
												}
											}
										}
									}
								}
							}
							.topCtnRight{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > p{
									margin-bottom: 15px;
								}
								.inner{
									width: 150px;
									height: 100px;
									border: 2px solid #ff7260;
									display: flex;
									align-items: center;
									.innerLeft{
										border: 1px solid #ff7260;
										flex:2;
										overflow: hidden;
										height: 50px;
										margin-left: 10px;
										position: relative;
										& > span{
											display: block;
											font-size: 28px;
											color: #ff7260;
											transform: rotate(45deg);
											position: absolute;
											top:5px;
											left: 10px;
										}
									}
									.innerRight{
										height: 100%;
										flex:2.5;
										overflow: hidden;
										display: flex;
										flex-direction: column;
										& > p{
											font-size: 14px;
											text-align: right;
											margin: 10px 5px 0 0;
										}
										.AB{
											flex:1;
											overflow: hidden;
											display: flex;
											justify-content: flex-end;
											align-items: flex-end;
											margin: 0 5px 10px 0;
											.A{
												display: flex;
												flex-direction: column;
												align-items: center;
												margin-right: 5px;
												& > p{
													font-size: 14px;
													margin-bottom: 10px;
												}
												.imgBox{
													width: 30px;
													height: 30px;
													& > img{
														width: 100%;
														height: 100%;
													}
												}
											}
											.B{
												display: flex;
												flex-direction: column;
												align-items: center;
												& > p{
													font-size: 14px;
													margin-bottom: 10px;
												}
												.imgBox{
													width: 30px;
													height: 30px;
													& > img{
														width: 100%;
														height: 100%;
													}
												}
											}
										}
									}
								}
							}
						}
						.btmCtn{
							flex:2;
							overflow:hidden;
							& > ul{
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								& > li + li{
									margin-top:20px;
								}
								& > li{
									width: 60%;
									padding: 5px;
									box-sizing: border-box;
									display: flex;
									align-items: center;
									border: 1px solid #e3e5e4;
									& > div{
										width: 50px;
										margin: 0 10px 0 10px;
										.el-button{
											width: 100%;
											height: 20px;
											background:#80d2fe;
											border-radius: 0;
											padding: 0;
										}
										& > img{
											width: 100%;
										}
									}
								}
							}
						}
					}
				}
				.twoBox-btm{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					& > p{
						font-size: 16px;
						height: 60px;
						display: flex;
						justify-content: center;
						align-items: center;
						border-top: 1px solid #e3e5e4;
						border-bottom: 1px solid #e3e5e4;
					}
					.twoBox-btmCtn{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						& > li + li{
							
						}
						& > li{
							width: 55%;
							margin: 0 auto;
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							& > p{
								margin-bottom: 15px;
							}
							& > div{
								width: 100%;
								border: 1px solid #e3e5e4;
								box-sizing: border-box;
								display: flex;
								align-items: center;
								.icon{
									width: 50px;
									height: 40px;
									& > div{
										transform: scale(.7) !important;
										margin-top: -5px;
									}
								}
							}
						}
					}
				}
			}
			.threeBox{
				border: 1px solid #e3e5e4;
				border-right: 0;
				flex:4.5;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.top{
					height: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid #e3e5e4;
					& > p{
						font-size: 16px;
					}
				}
				.btm{
					flex:1;
					overflow: hidden;
					display: flex;
					flex-direction: column;
					.btmTop{
						flex:3;
						overflow: hidden;
						display: flex;
						border-bottom: 1px solid #e3e5e4;
						.left{
							flex:1;
							overflow: hidden;
							padding: 10px 5px;
							display: flex;
							flex-direction: column;
							border-right: 1px solid #e3e5e4;
							box-sizing: border-box;
							& > p{
								text-align: center;
								padding: 20px 0;
								box-sizing: border-box;
							}
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > p{
										flex:1;
										overflow: hidden;
										font-size: 14px;
									}
									& > div{
										padding: 5px 0;
									}
								}
							}
						}
						.right{
							flex:1;
							overflow: hidden;
							padding: 10px 5px;
							display: flex;
							flex-direction: column;
							box-sizing: border-box;
							& > p{
								text-align: center;
								padding: 20px 0;
								box-sizing: border-box;
							}
							& > ul{
								flex:1;
								overflow: hidden;
								display: flex;
								flex-direction: column;
								align-items: center;
								& > li + li{
									margin-top: 2px;
								}
								& > li{
									width: 100%;
									text-align: center;
									// border: 1px solid #e3e5e4;
									// padding: 5px 0;
									box-sizing: border-box;
									& > p{
										flex:1;
										overflow: hidden;
										font-size: 14px;
									}
									& > div{
										padding: 5px 0;
									}
								}
							}
						}
					}
					.btmBtm{
						flex:1;
						overflow: hidden;
						display: flex;
						flex-direction: column;
						.btmBtm_top{
							height: 40px;
							display: flex;
							justify-content: center;
							align-items: center;
							border-bottom: 1px solid #e3e5e4;
							& > p{
								font-size: 16px;
							}
						}
						.btmBtm_btm{
							display: flex;
							.left{
								flex:1;
								overflow: hidden;
								padding: 10px 5px;
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								& > ul{
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > p{
											flex:1;
											overflow: hidden;
											font-size: 14px;
										}
										& > div{
											padding: 5px 0;
										}
									}
								}
							}
							.right{
								flex:1;
								overflow: hidden;
								padding: 10px 5px;
								display: flex;
								flex-direction: column;
								box-sizing: border-box;
								justify-content: center;
								& > ul{
									flex:1;
									overflow: hidden;
									display: flex;
									flex-direction: column;
									justify-content: space-between;
									align-items: center;
									& > li + li{
										margin-top: 2px;
									}
									& > li{
										width: 100%;
										text-align: center;
										// border: 1px solid #e3e5e4;
										// padding: 5px 0;
										box-sizing: border-box;
										& > p{
											flex:1;
											overflow: hidden;
											font-size: 14px;
										}
										& > div{
											padding: 5px 0;
										}
									}
								}
							}
						}
					}
				}
			}
			.fourBox{
				flex:4;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				.top{
					height: 60px;
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #e3e5e4;
					border-left: 0;
					& > p{
						font-size: 16px;
					}
				}
				.btm{
					flex:1;
					overflow: hidden;
					display: flex;
					border-bottom: 1px solid #e3e5e4;
					.left{
						flex:1;
						overflow: hidden;
						padding: 10px 5px;
						display: flex;
						flex-direction: column;
						border-right: 1px solid #e3e5e4;
						box-sizing: border-box;
						& > p{
							text-align: center;
							padding: 20px 0;
							box-sizing: border-box;
						}
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > p{
									flex:1;
									overflow: hidden;
									font-size: 14px;
								}
								& > div{
									padding: 5px 0;
								}
							}
						}
					}
					.right{
						flex:1;
						overflow: hidden;
						padding: 10px 5px;
						display: flex;
						flex-direction: column;
						border-right: 1px solid #e3e5e4;
						box-sizing: border-box;
						& > p{
							text-align: center;
							padding: 20px 0;
							box-sizing: border-box;
						}
						& > ul{
							flex:1;
							overflow: hidden;
							display: flex;
							flex-direction: column;
							align-items: center;
							& > li + li{
								margin-top: 2px;
							}
							& > li{
								width: 100%;
								text-align: center;
								// border: 1px solid #e3e5e4;
								// padding: 5px 0;
								box-sizing: border-box;
								& > p{
									flex:1;
									overflow: hidden;
									font-size: 14px;
								}
								& > div{
									padding: 5px 0;
								}
							}
						}
					}
				}
			}
	  }
	}
}
